<!-- 承运类型组件 -->
<template>
  <nut-popup position="bottom" closeable round :style="{ height: '50%' }" @click-close-icon="sendSendTypeMsg(0)" v-model:visible="props.showRound">
    <nut-cell title="承运类型"></nut-cell>
    <nut-cell class="sendTypeBox">
      <nut-radio-group class="btn_box" v-model="radioVal" direction="horizontal">
        <nut-radio shape="button" label="1">快件</nut-radio>
        <nut-radio shape="button" label="2">普件</nut-radio>
        <nut-radio shape="button" label="3">整车</nut-radio>
        <nut-radio shape="button" label="4">506经济件</nut-radio>
        <nut-radio shape="button" label="5">506商务件</nut-radio>
        <nut-radio shape="button" label="6">次日达</nut-radio>
        <nut-radio shape="button" label="7">隔日达</nut-radio>
      </nut-radio-group>
    </nut-cell>
    <!-- <nut-cell class="flex-ld">
      <span>是否加急</span> <nut-switch v-model="checked" />
    </nut-cell> -->
    <nut-button class="btn" block type="primary" color="#0966ff" @click="sendSendTypeMsg(1)">确定</nut-button>
  </nut-popup>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import Taro from '@tarojs/taro'
import { checkSendType } from '@/@api/wait' // 待确认接口

const props = defineProps<{
  showRound: boolean
  initSendType: string
  // initUrgent: string,
}>()

const emit = defineEmits(['sendSendTypeMsg'])

const radioVal = ref('') // 选中的label
const checked = ref(false) // 是否加急 0 不加急 1 加急

// 监听承运类型
watch(
  () => props.initSendType,
  (newVal) => {
    // console.log(newVal, '子组件监听承运类型')
    if (newVal) {
      radioVal.value = newVal
    }
  }
)

// 监听是否加急
// watch(() => props.initUrgent, (newVal) => {
//   // console.log(newVal, '子组件监听是否加急')
//   if (Number(newVal) == 1) {
//     checked.value = true
//   } else if (Number(newVal) == 0) {
//     checked.value = false
//   } else {
//     checked.value = false
//   }
// })

// 判断是否能选
async function checkOpen() {
  let params = { 
    cStart: Taro.getStorageSync('btStaff').branchCompanyNo, // 起运地网点编号
    cStartName: Taro.getStorageSync('btStaff').branchCompanyName, // 起运地名称
    cType: radioVal.value, // 承运类型
    limitSend: 1 // 是否限时送
  }
  const res = await checkSendType(params)
  console.log(res, '是否可选承运类型')
  if (res.data.code == 200) {
    if (res.data.rows.length != 0) {
      peopleList.value = res.data.rows
      emptyShow.value = false
    } else {
      emptyShow.value = true
    }
  } else {
    emptyShow.value = true
  }
}

const sendSendTypeMsg = (flag) => {
  if (flag) {
    let urgent
    if (checked.value) {
      urgent = 1
    } else {
      urgent = 0
    }
    if (!radioVal.value) {
      Taro.showToast({
        icon: 'error',
        title: '请选择承运类型'
      })
      return
    }
    // 根据选择的承运类型判断是否可以选

    const sendData = {
      sendType: radioVal.value,
      urgent
    }
    emit('sendSendTypeMsg', sendData) // 关闭弹窗传递数据
  } else {
    emit('sendSendTypeMsg', null) // 关闭弹窗不传递数据
  }
}
</script>

<style lang="scss">
.nut-tabs.vertical .nut-tabs__titles-item.active .nut-tabs__titles-item__line {
  left: 0rpx;
  width: 6rpx;
  background: #0966ff;
}

.nut-cell {
  margin: 0;
}

.nut-tab-pane {
  padding: 0;
}

.nut-radio-group {
  display: block;
}

.flex_ld {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn_box {
  .button {
    width: 218rpx;
    height: 72rpx;
    border-radius: 88rpx;
  }
}

.nut-radio__button {
  width: 210rpx;
  height: 72rpx;
  border-radius: 88rpx;
  justify-content: center;
}

.nut-switch {
  background: #0966ff;
}

.nut-radio__button--active {
  color: #0966ff;
  font-weight: bold;
}

.nut-radio__button--active {
  color: var(--nut-radio-label-font-active-color, var(--nut-primary-color, #0966ff));
  border: 2rpx solid var(--nut-radio-label-button-border-color, var(--nut-primary-color, #0966ff));
}

.nut-radio__button--active::after {
  border-radius: 88rpx;
  background-color: var(--nut-radio-label-button-background, var(--nut-primary-color, #0966ff));
}
</style>
